import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Form, Select, Modal, Input, message, Pagination } from 'antd'
import axios from '../../axios/index'
import Utils from '../../utils/utils'

const FormItem = Form.Item
const Option = Select.Option

const City = () => {
  const [visible, setVisible] = useState(false)
  const [list, setList] = useState([])
  const [pagination, setPagination] = useState(1)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)

  const onCreate = (values) => {
    let sys_user_name = JSON.parse(localStorage.getItem('bikeCMS'))
    setVisible(false);
    axios.ajax({
      url: '/city/openCity',
      data: {
        params: {
          sys_user_name,
          ...values
        }
      }
    }).then((res) => {
      if (res.status === 200 && res.code === 0) {
        message.info(res.result);
        requestList()
      }
    })
  }

  const requestList = (pagination) => {
    axios.ajax({
      url: '/city/list',
      data: {
        params: {
          page: pagination
        }
      }
    }).then((res) => {
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      setList(list)
    })
  }

  useEffect(() => {
    requestList(pagination)
  }, [pagination])

  const columns = [
    {
      title: '城市ID',
      dataIndex: 'id'
    }, {
      title: '城市名称',
      dataIndex: 'name'
    }, {
      title: '用车模式',
      dataIndex: 'mode',
      render(mode) {
        return mode === 1 ? '停车点' : '禁停区';
      }
    }, {
      title: '营运模式',
      dataIndex: 'op_mode',
      render(op_mode) {
        return op_mode === 1 ? '自营' : '加盟';
      }
    }, {
      title: '授权加盟商',
      dataIndex: 'franchisee_name'
    }, {
      title: '城市管理员',
      dataIndex: 'city_admins',
      render(arr) {
        return arr.map((item) => {
          return item;
        }).join(' , ');
      }
    }, {
      title: '城市开通时间',
      dataIndex: 'open_time',
      render: Utils.formateDate
    }, {
      title: '操作时间',
      dataIndex: 'update_time',
      render: Utils.formateDate
    }, {
      title: '操作人',
      dataIndex: 'sys_user_name'
    }
  ]

  const onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
    showModal()
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const paginationChange = (pagination) => {
    setPagination(pagination)
  }

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    let delDataId = list[selectedRowKeys]
    console.log(delDataId)
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div style={{ width: '100%' }}>
      <Card>
        <FilterForm />
      </Card>
      <Card style={{ marginTop: 10, paddingTop: 15 }}>
        <Button
          type="primary"
          onClick={() => {
            setVisible(true);
          }}
        >
          开通城市
        </Button>
      </Card>
      <Card>
        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={list}
            pagination={false}
            rowSelection={rowSelection}
          />
          <div className="pagination" style={{ float: 'right', marginTop: 20 }}>
            <Pagination onChange={paginationChange} defaultCurrent={1} total={10 * (pagination + 1)} />
          </div>
        </div>
      </Card>
      <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>确认删除？</p>
      </Modal>
      <OpenCity
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  )
}

const OpenCity = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  return (
    <Modal
      visible={visible}
      title="开通城市"
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="id"
          label="选择城市"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Select style={{ width: 100 }}>
            <Option value={12443}>洛阳市</Option>
            <Option value={11443}>北京市</Option>
            <Option value={14644}>厦门市</Option>
            <Option value={14643}>广州市</Option>
            <Option value={14443}>深圳市</Option>
            <Option value={14244}>柳州市</Option>
            <Option value={84244}>合肥市</Option>
            <Option value={74244}>南昌市</Option>
            <Option value={45244}>大同市</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="op_mode"
          label="营运模式"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}>
          <Select style={{ width: 100 }}>
            <Option value={1}>自营</Option>
            <Option value={2}>加盟</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="mode"
          label="用车模式"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Select style={{ width: 100 }}>
            <Option value={1}>指定停车点</Option>
            <Option value={2}>禁停区</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="franchisee_name"
          label="授权加盟商"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Input type="text" placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="city_admins"
          label="城市管理员"
          rules={[
            {
              required: true,
              message: '请选择',
            },
          ]}
        >
          <Input type="text" placeholder="请输入姓名" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

const FilterForm = () => {
  return (
    <div style={{ marginTop: 20 }}>
      <Form layout="inline">
        <FormItem label="城市">
          <Select placeholder="请选择">
            <Option value="">全部</Option>
            <Option value="1">北京市</Option>
            <Option value="2">天津市</Option>
            <Option value="3">深圳市</Option>
            <Option value="3">广州市</Option>
            <Option value="3">杭州市</Option>
          </Select>
        </FormItem>
        <FormItem label="用车模式">
          <Select
            style={{ width: 120 }}
            placeholder="全部"
          >
            <Option value="">全部</Option>
            <Option value="1">指定停车点模式</Option>
            <Option value="2">禁停区模式</Option>
          </Select>
        </FormItem>
        <FormItem label="营运模式">
          <Select
            style={{ width: 80 }}
            placeholder="全部"
          >
            <Option value="">全部</Option>
            <Option value="1">自营</Option>
            <Option value="2">加盟</Option>
          </Select>
        </FormItem>
        <FormItem label="加盟商授权状态">
          <Select
            style={{ width: 100 }}
            placeholder="全部"
          >
            <Option value="">全部</Option>
            <Option value="1">已授权</Option>
            <Option value="2">未授权</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" style={{ margin: '0 20px' }}>查询</Button>
          <Button>重置</Button>
        </FormItem>
      </Form>
    </div>
  )
}

export default City